---
import { PHOTOS_CONFIG } from '~/config'
import Layout from '~/layouts/Layout.astro'
import PhotoTimeline from '~/components/photos/PhotoTimeline.astro'
import PageTitle from '~/components/base/PageTitle.astro'
import { PhotosList } from '~/lib/photos'

const { title, description, introduce } = PHOTOS_CONFIG
---

<Layout {title} {description}>
  <div class="relative z-[1] py-8 pb-10 px-6 sm:px-8">
    <PageTitle {title} {introduce} />
    <div class="mt-12">
      {
        PhotosList.length > 0 ? (
          <PhotoTimeline photoData={PhotosList} />
        ) : (
          <div class="text-muted-foreground mb-4">
            <p class="text-sm">No photos yet, wait for me to return, OvO</p>
          </div>
        )
      }
    </div>
  </div>
</Layout>
